<template>
    <!-- 历史数据 -->
  <div class="historical-data">
    <div class="toolbar-wrap">
     <!-- <span>数据类型：</span>
      <el-button-group>
        <el-button
          :class="{active:dataType === index}"
          size="small" type="primary" plain
          :key = "index"
          v-for="item,index in dataTypeList"
          @click="dataTypeToggle(index)"
        >{{ item.name }}</el-button>
      </el-button-group>&emsp;-->
      <span>时间段：</span>
      <div class="layoutBox" style="width: 224px;">
        <el-date-picker
          v-model = "dataValue"
          type = "datetimerange"
          align = "right"
          unlink-panels
          range-separator = "~"
          start-placeholder = "开始日期"
          end-placeholder = "结束日期"
          :clearable = 'false'
          format = 'yyyy-MM-dd HH:mm'
          prefix-icon = 'el-icon-date'
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>&emsp;
      <el-button @click="searchTableChart">
        <i class="iconfont icon-sousuo"></i> 查询
      </el-button>
    </div>
    <div class="historical-content">
      <!--<div class=" content-toolbar ">
        <el-radio v-model="radio" label="1">列表</el-radio>
        <el-radio v-model="radio" label="2">图表</el-radio>
      </div>-->
      <div v-show="radio==='1'" class="normal-table-wrap"
           v-loading="tableLoading"
           element-loading-text="拼命加载中"
           element-loading-spinner="loading-type-a"
           element-loading-background="rgba(255, 255, 255, 1)"
      >
        <!--<div v-if="tableLoading" class="loading-wrap"></div>-->
        <div v-if="tableNoDataState" class="no-data-wrap small no-data-table">
          <p>暂无数据</p>
        </div>
        <div class="table-wrap" style="height: calc(100% - 35px);">
          <el-table
            ref="singleTable"
            :data="tableData"
            border
            empty-text=" "
            height="100%"
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              align="center"
              fixed
              width="50">
            </el-table-column>
            <!-- <el-table-column
              prop="stationName"
              fixed
              width="122"
              :show-overflow-tooltip = "true"
              label="站点">
            </el-table-column> -->
            <el-table-column
              prop="dataTime"
              fixed
              width="156"
              label="时间">
            </el-table-column>
            <el-table-column
              :key="index" v-for="item,index in headcolumn"
              :prop="item.value"
              :label="item.label">
            </el-table-column>
          </el-table>
        </div>
        <div class="paginationBox">
          <el-pagination
            @size-change="paginationSizeChange"
            @current-change="paginationChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            background
            :small = "true"
            popper-class = "select-common-option"
            :page-sizes = "pageList"
            layout="total,sizes,->,prev, pager, next, jumper"
            :total="totalRecords">
            <!--<span class="el-pagination__current">当前第{{currentPage}}/{{totalPage}}页</span>-->
          </el-pagination>
        </div>
      </div>
      <div v-show="radio==='2'" class="chart-content"
           v-loading="chartLoading"
           element-loading-text="拼命加载中"
           element-loading-spinner="loading-type-a"
           element-loading-background="rgba(255, 255, 255, 1)"
      >
        <!--<div v-if="chartLoading" class="loading-wrap"></div>-->
        <div v-if="chartNoDataState" class="no-data-wrap small no-data-chart">
          <p>暂无数据</p>
        </div>
        <div id="factor-historical-chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
  // import {formatDate} from '../../dateformat.js'

  let pickerOptions = {
    shortcuts: [{
      text: '最近一周',
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        picker.$emit('pick', [start, end]);
      }
    }, {
      text: '最近一个月',
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        picker.$emit('pick', [start, end]);
      }
    }, {
      text: '最近三个月',
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        picker.$emit('pick', [start, end]);
      }
    }]
  };
    export default {
        name: "historicalData",
        watch:{
          radio(val){
            if(val === '2'){
              setTimeout(this.searchTableChart, 100);
            }
          },
          stationType(val){
            if(val === '002'){
              this.headcolumn = this.headcolumnB;
            }else{
              this.headcolumn = this.headcolumnA;
            }
            this.historicalDataSearch();
          },
        },
        data(){
          return {
            tableLoading:false,
            tableNoDataState:false,
            chartLoading:false,
            chartNoDataState:false,
            dataType:0,
            dataTypeList:[
              {
                name:'小时数据',
                type:'hour'
              },{
                name:'日数据',
                type:'day'
            }],
            dataValue:'',
            pickerOptions,
            equipId:null,
            radio:'1',
            tableData:[{},{},{}],
            headcolumn:[],
            headcolumnA: [
              { value: 'w01010', label: "水温"},
              { value: 'w01001', label: "pH"},
              { value: 'w01009', label: "溶解氧"},
              { value: 'w01014', label: "电导率"},
              { value: 'w01003', label: "浊度"},
              { value: 'w01019', label: "高锰酸盐"},
              { value: 'w21003', label: "氨氮"},
              { value: 'w21011', label: "总磷"},
              { value: 'w21001', label: "总氮"}
            ],
            headcolumnB: [
              { value: 'w01001', label: "pH"},
              { value: 'w01018', label: "CODcr"},
              { value: 'w21003', label: "氨氮"},
              { value: 'w21011', label: "总磷"},
              { value: 'w21001', label: "总氮"}
            ],
            currentPage: 1, //分页组件当前页
            pageSize: 10, //分页每页多少条数据
            totalRecords: 0, //总条数
            pageList: [10, 15, 20], //设置每页多少条
            stationType:''
          }
        },
        computed: {
          totalPage() {
            //计算总页数
            let number = 0;
            number = Math.ceil(this.totalRecords / this.pageSize);
            return number === 0 ? 1 : number;
          },
          stationMn: {
            get: function() {
              return this.$store.state.siteMn;
            }
          }
        },
        methods:{
          paginationChange(val) {
            //分页页码改变时执行
            this.currentPage = val;
            this.historicalDataSearch();
          },
          //分页pageSize改变时执行
          paginationSizeChange(val) {
            this.pageSize = val;
            this.historicalDataSearch();
          },
          setWidth(str){
            if(str){
              let num = str.length;
              return (num*13+20)>104? (num*13+20):104
            }
          },
          getpropertys(item){
            return 'projects.'+item.projectCode+'.value';
          },
          searchData(equipId){
            this.equipId=equipId;
            // this.searchcolumn();
          },
          convertDateFromString(dateString){
            if (dateString) {
              var date = new Date(dateString.replace(/-/,"/"))
              return date;
            }
          },
          initTime(){
            var date=new Date();
            // var ndate=this.convertDateFromString(formatDate(date,'yyyy-MM-dd hh:00:00'));
            var ndate=this.convertDateFromString(date.format('yyyy-MM-dd hh:00:00'));
            var datearr=[];
            datearr.push(new Date(ndate.getTime()-86400*1000),new Date(ndate.getTime()+3600*1000));
            this.dataValue=datearr;
            this.historicalDataSearch();
          },
          searchTableChart(){
            // this.tableLoading = true;
            // this.tableNoDataState = false;
            // this.chartLoading = true;
            // this.chartNoDataState = false;
            this.historicalDataSearch();
            // this.factorChangeTrend();
          },
          historicalDataSearch(){
            let startTimee = this.dataValue[0].format('yyyy-MM-dd hh:mm:ss');
            let endTime = this.dataValue[1].format('yyyy-MM-dd hh:mm:ss');
            this.$http.get("/Receiving/queryRowToColHourData", {
                params: {
                  beginTime: startTimee,
                  endTime: endTime,
                  mn: this.stationMn.stationMn, //this.stationId
                  pageNum: this.currentPage,
                  pageSize: this.pageSize
                }
              }).then(res => {
                if (res.data.code === 0) {
                  this.tableData = res.data.content.dataList;
                  this.totalRecords = res.data.content.totalRecords;
                }
              }).catch(error => {});
          },
          factorChangeTrend(){
            var statisType=this.dataTypeList[this.dataType].type;
            // var startTime=formatDate(this.dataValue[0],'yyyy-MM-dd hh:mm:ss');
            // var endTime=formatDate(this.dataValue[1],'yyyy-MM-dd hh:mm:ss');
            var startTime=this.dataValue[0].format('yyyy-MM-dd hh:mm:ss');
            var endTime=this.dataValue[1].format('yyyy-MM-dd hh:mm:ss');
            let mrChart = this.$echarts.init(document.getElementById('factor-historical-chart'));
            var paramsp={
              equipdIds: this.equipId,
              statisType:statisType,
              startTime:startTime,
              endTime:endTime,
              wql:false
            };
            this.$http.get('/waterenvapi/station/projectValueTrendChart',{
              params:paramsp
            }).then((response)=>{
              let dataJson = response.data;
              if(dataJson.code === 200){
                var info = dataJson.content.info;
                var legengarr=[];
                for(var i=0;i<info.legend.length;i++){
                  legengarr.push(info.legend[i]);
                }
                var series=[];
                var serobj=info.yAxis;
                for(var i=0;i<serobj.length;i++){
                  var obj=serobj[i];
                  series.push({
                    name:obj.name,
                    type:'line',
                    symbolSize:8,
                    data:obj.list
                  });
                }
               if(series.length === 0){
                  this.chartNoDataState = true;
               }else{
                 this.chartNoDataState = false;
               }
                let option = {
                  title:{
                    text:"各监测因子变化趋势",
                    textStyle:{
                      fontSize: 16,
                      fontWeight:600
                    },
                    x:'center',
                    y: 10
                  },
                  color:["#166bce","#ff7e00","#ce1768","#11c053","#9c16ce","#22c0ce"],
                  tooltip: {
                    trigger: 'axis'
                  },
                  legend: {
                    // data:info.legend,
                    bottom:0
                  },
                  grid: {
                    left: 40,
                    right: 20,
                    bottom: 50,
                    containLabel: true
                  },
                  xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: info.xAxis,
                    axisTick:{
                      show:false
                    },
                    axisLine:{
                      lineStyle:{
                        color:"#c6d1de"
                      }
                    },
                    axisLabel:{
                      color:"#999"
                    },
                    splitLine:{
                      show:true
                    }
                  },
                  yAxis: {
                    type: 'value',
                    name:'监测值',
                    nameLocation:"middle",
                    nameTextStyle:{
                      color:"#999"
                    },
                    nameGap: 40,
                    axisTick:{
                      show:false
                    },
                    splitNumber:10,
                    axisLine:{
                      lineStyle:{
                        color:"#c6d1de"
                      }
                    },
                    axisLabel:{
                      color:"#999"
                    }
                  },
                  series: series
                };
                mrChart.setOption(option,true);
              }
              this.chartLoading = false
            }).catch((error)=>{
              this.chartLoading = false;
            });

          }
        },
        mounted(){
          this.initTime();
          if(this.stationMn.stationType){
            this.stationType = this.stationMn.stationType;
          }else{
            this.stationType = '001';
          }
        }
    }
</script>

<style scoped lang="less">
.historical-data{
  height: 466px;
  padding: 0 8px;
  .toolbar-wrap{
    padding: 4px;
    line-height: 30px;
  }
  .content-toolbar{
    padding: 4px 0 8px 0;
  }
  .normal-table-wrap,.chart-content{
    height: 418px;
    position: relative;
  }
  #factor-historical-chart{
    height: 288px;
    width: 754px;
  }
  .no-data-chart.no-data-wrap p{
    top: 98px;
  }
}
</style>
